<template>
  <!-- 应用根容器 -->
  <div id="app">
    <!-- 路由视图容器，控制路由组件的显示 -->
    <!-- v-if="isRouterAlive" 用于实现路由组件的强制刷新 -->
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script setup lang="ts">
// 导入Vue Composition API
import { ref, nextTick, provide } from "vue";
// 导入主题相关钩子（当前被注释）
// import { useTheme } from "@/hooks/useTheme";

// 路由组件存活状态控制
const isRouterAlive = ref(true);

/**
 * 重新加载路由组件的方法
 * 通过改变 isRouterAlive 的值强制重新挂载路由组件
 * 常用于需要刷新当前页面但保持路由不变的场景
 */
const reload = () => {
  // 先将状态设为 false 销毁当前路由组件
  isRouterAlive.value = false;
  
  // 在下一个DOM更新周期后
  nextTick(() => {
    // 重新设为 true 重新创建路由组件
    isRouterAlive.value = true;
  });
};

// 初始化主题（当前被注释）
// const { initTheme } = useTheme();
// initTheme();

// 向所有子组件提供 reload 方法
// 子组件可以通过 inject("reload") 获取该方法
provide("reload", reload);
</script>

<style lang="scss">
/* 全局body样式 */
body {
  overflow: hidden; /* 隐藏滚动条，防止页面滚动 */
  background-color: var(--el-bg-color-page); /* 使用Element Plus的背景色变量 */
}

/* 应用根容器样式 */
#app {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  overflow: hidden; /* 隐藏溢出内容 */
  
  /* 字体相关设置 */
  font-variant: tabular-nums; /* 使用等宽数字 */
  color: var(--el-text-color-primary); /* 使用Element Plus的主文本颜色变量 */
  -webkit-font-smoothing: antialiased; /* 字体抗锯齿（Webkit） */
  -moz-osx-font-smoothing: grayscale; /* 字体抗锯齿（Firefox） */
  
  /* 环境标签样式（如开发/测试环境标识） */
  .env_tag {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    right: 0; /* 右侧对齐 */
    z-index: 901; /* 高z-index确保在最上层 */
    padding: 0 6px; /* 内边距 */
    font-size: 12px; /* 字体大小 */
    color: #ffffff; /* 白色文字 */
    background-color: red; /* 红色背景 */
    border-radius: 0 0 0 4px; /* 左下角圆角 */
  }
}
</style>